import { SearchOutlined } from '@ant-design/icons';
import { useState } from 'react';

import {
  Input,
  Alert,
  Segmented,
  Search,
  Dropdown,
  Button,
  Empty,
  CustomMenu,
  AntdDrawer,
  Tags,
  Tag,
  CopyLabel,
  Label,
  RequiredLabel,
  CustomFormLabel,
  Radio,
  RadioGroup,
  Slider,
  InputNumber,
} from '@/components/eai-design';
import BadgeDemo from '@/components/eai-design/badge/demo';
import UploadDemo from '@/components/eai-design/upload/demo';

const BadgeDemoTest = () => {
  return <BadgeDemo />;
};
const UploadDemoTest = () => {
  return <UploadDemo />;
};

const InputNumberDemo = () => {
  return (
    <div className="flex flex-col gap-2">
      <div>eaid InputNumber</div>
      <InputNumber />
    </div>
  );
};
const SliderDemo = () => {
  return (
    <div className="flex flex-col gap-2">
      <div>eaid Slider</div>
      <div>Slider default</div>
      <Slider />
      <div>Slider small</div>
      <Slider size="small" />
      <div>Slider vertical</div>
      <div className="flex flex-row gap-10">
        <Slider vertical defaultValue={30} />
        <Slider size="small" vertical defaultValue={30} />
      </div>

      <div>Slider marks</div>
      <Slider
        marks={{
          1: '😞',
          2: '😐',
          3: '😊',
          4: '😍',
          5: '🤩',
        }}
        min={1}
        max={5}
        defaultValue={3}
      />

      <Slider
        size="small"
        marks={{
          0: '0',
          20: '20',
          40: '40',
          60: '60',
          80: '80',
          100: '100',
        }}
        defaultValue={20}
      />
      <Slider
        marks={{
          0: '0',
          20: '20',
          40: '40',
          60: '60',
          80: '80',
          100: '100',
        }}
        defaultValue={20}
      />
      <div className="flex flex-row gap-10">
        <Slider
          vertical
          size="small"
          marks={{
            0: '0',
            20: '20',
            40: '40',
            60: '60',
            80: '80',
            100: '100',
          }}
          defaultValue={20}
        />

        <Slider
          vertical
          marks={{
            0: '0',
            20: '20',
            40: '40',
            60: '60',
            80: '80',
            100: '100',
          }}
          defaultValue={20}
        />
      </div>

      <div>Slider range</div>
      <Slider range defaultValue={[20, 50]} />

      <div>Slider sigleInput</div>
      <div className="flex flex-col gap-4">
        <div className="flex  gap-4">
          <Slider
            vertical
            showInput
            marks={{
              0: '0',
              20: '20',
              40: '40',
              60: '60',
              80: '80',
              100: '100',
            }}
            defaultValue={20}
          />
          <Slider
            vertical
            size="small"
            showInput
            marks={{
              0: '0',
              20: '20',
              40: '40',
              60: '60',
              80: '80',
              100: '100',
            }}
            defaultValue={20}
          />
        </div>
        <Slider
          size="small"
          showInput
          marks={{
            0: '0',
            20: '20',
            40: '40',
            60: '60',
            80: '80',
            100: '100',
          }}
          defaultValue={20}
        />
        <Slider showInput defaultValue={20} />
        <Slider size="small" showInput defaultValue={20} />
      </div>
      <div>Slider rangeInput</div>
      <div className="flex flex-col gap-y-4">
        <div className="flex  gap-4">
          <Slider
            vertical
            showInput
            range
            marks={{
              0: '0',
              20: '20',
              40: '40',
              60: '60',
              80: '80',
              100: '100',
            }}
            defaultValue={[20, 50]}
          />
          <Slider
            size="small"
            vertical
            showInput
            range
            marks={{
              0: '0',
              20: '20',
              40: '40',
              60: '60',
              80: '80',
              100: '100',
            }}
            defaultValue={[20, 50]}
          />
        </div>

        <Slider
          marks={{
            0: '0',
            20: '20',
            40: '40',
            60: '60',
            80: '80',
            100: '100',
          }}
          showInput
          range
          defaultValue={[20, 50]}
        />
        <Slider
          size="small"
          marks={{
            0: '0',
            20: '20',
            40: '40',
            60: '60',
            80: '80',
            100: '100',
          }}
          showInput
          range
          defaultValue={[20, 50]}
        />
        <Slider showInput range defaultValue={[20, 50]} />
        <Slider size="small" showInput range defaultValue={[20, 50]} />
      </div>

      <div>禁用silder</div>
      <div className="flex flex-col gap-4">
        <Slider disabled defaultValue={20} />
        <Slider size="small" disabled defaultValue={20} />
        <Slider disabled range defaultValue={[20, 50]} />
        <Slider
          size="small"
          disabled
          range
          marks={{
            0: '0',
            20: '20',
            40: '40',
            60: '60',
            80: '80',
            100: '100',
          }}
          defaultValue={[20, 50]}
        />
        <Slider
          showInput
          size="small"
          disabled
          range
          marks={{
            0: '0',
            20: '20',
            40: '40',
            60: '60',
            80: '80',
            100: '100',
          }}
          defaultValue={[20, 50]}
        />
      </div>
    </div>
  );
};
const RadioDemo = () => {
  return (
    <div className="flex flex-col gap-2">
      <div>eaid Radio</div>
      <Radio>选项1</Radio>
      <Radio>选项2</Radio>
      <Radio>选项3</Radio>

      <div>RadioGroup default</div>

      <RadioGroup>
        <Radio value={1}>选项1</Radio>
        <Radio value={2}>选项2</Radio>
        <Radio value={3}>选项3</Radio>
      </RadioGroup>

      <div>RadioGroup options</div>
      <RadioGroup
        name="radiogroup"
        options={[
          { value: 1, label: 'Cas' },
          { value: 2, label: 'Oauth2' },
        ]}
      />
    </div>
  );
};
const CustomFormLabelDemo = () => {
  return (
    <div className="flex flex-col gap-2">
      <div>eaid CustomFormLabel</div>
      <CustomFormLabel prefix required description="表单字段标签文案描述">
        表单字段标签文案描述
      </CustomFormLabel>
      <CustomFormLabel required>表单字段标签文案</CustomFormLabel>
      <CustomFormLabel prefix>表单字段标签文案</CustomFormLabel>
    </div>
  );
};
const LabelDemo = () => {
  return (
    <div className="flex flex-col gap-2">
      <div>Label</div>
      <Label>Label</Label>
      <div>Required Label</div>
      <RequiredLabel>RequiredLabel</RequiredLabel>
    </div>
  );
};

const CopyLabelDemo = () => {
  return (
    <div className="flex flex-col gap-2">
      <div>
        <span>CopyLabel</span>
        <CopyLabel text="这个是需要复制的文本" />
      </div>
    </div>
  );
};

const TagsDemo = () => {
  const options = [
    {
      label: '测试文本1',
      value: '测试文本1',
    },
    {
      label: '测试文本2',
      value: '测试文本2',
    },
    {
      label: '测试文本3',
      value: '测试文本3',
    },
    {
      label: '测试文本4',
      value: '测试文本4',
    },
  ];
  return (
    <div className="flex flex-col gap-2">
      <div className="flex flex-col gap-2">
        <span>Tags 显示，超出自动收起，显示为 + 未显示的数量</span>
        <Tags options={options} value={['测试文本1', '测试文本2', '测试文本3', '测试文本4']} />
      </div>
      <div className="flex flex-col gap-2">
        <span>Tags 配置maxTagCount，可自定义 tagRender</span>
        <Tags
          options={options}
          value={['测试文本1', '测试文本2', '测试文本3', '测试文本4']}
          maxTagCount={2}
          tagRender={(tagProps) => {
            const { label, closable, onClose, ...rest } = tagProps;
            return (
              <Tag color="warning" {...rest}>
                {label}
              </Tag>
            );
          }}
        />
      </div>
    </div>
  );
};

const InputDemo = () => {
  return (
    <div className="flex flex-col gap-2">
      <div className="flex flex-col">
        <span>input</span>
        <Input />
      </div>
      <div className="flex flex-col">
        <span>input error</span>
        <Input isError />
      </div>
      <div className="flex flex-col">
        <span>input error message</span>
        <Input isError errorMessage="error message" />
      </div>
      <div className="flex flex-col">
        <span>input with prefix</span>
        <Input prefix={<SearchOutlined />} />
      </div>
      <div className="flex flex-col">
        <span>input with suffix</span>
        <Input suffix={<SearchOutlined />} />
      </div>
      <div className="flex flex-col">
        <span>input with prefix and suffix</span>
        <Input prefix={<SearchOutlined />} suffix={<SearchOutlined />} />
      </div>
      <div className="flex flex-col">
        <span>search</span>
        <Search />
      </div>
      <div className="flex flex-col" />
    </div>
  );
};

const AlertDemo = () => {
  return (
    <div className="flex flex-col gap-2">
      <div>Alert</div>
      <span>info</span>
      <Alert type="info" message="info" />
      <span>success</span>
      <Alert type="success" message="success" />
      <span>warning</span>
      <Alert type="warning" message="warning" />
      <span>error</span>
      <Alert type="error" message="error" />
    </div>
  );
};

const SegmentedDemo = () => {
  return (
    <div className="flex flex-col gap-2">
      <div>Segmented</div>
      <Segmented options={['全部来源', '我创建的']} />
    </div>
  );
};

const DropdownDemo = () => {
  const items = [
    {
      key: '1',
      label: '1st item',
    },
    {
      key: '2',
      label: '2nd item',
    },
    {
      key: '3',
      label: '3rd item',
    },
  ];
  return (
    <div className="flex flex-col gap-2">
      <div>Dropdown</div>
      <Dropdown menu={{ items }}>
        <Button>dropdown</Button>
      </Dropdown>
    </div>
  );
};

const EmptyDemo = () => {
  return (
    <div className="flex flex-col gap-2">
      <div>Empty</div>
      <Empty />
    </div>
  );
};

const DrawerDemo = () => {
  const [open, setOpen] = useState(false);
  const [direction, setDirection] = useState<'left' | 'right' | 'top' | 'bottom'>('right');
  return (
    <div className="flex flex-col gap-2">
      <div>Drawer</div>
      <Button
        onClick={() => {
          setOpen(true);
          setDirection('right');
        }}
      >
        点击右侧打开Drawer
      </Button>
      <Button
        onClick={() => {
          setDirection('left');
          setOpen(true);
        }}
      >
        点击左侧打开Drawer
      </Button>
      <Button
        onClick={() => {
          setDirection('top');
          setOpen(true);
        }}
      >
        点击顶部打开Drawer
      </Button>
      <Button
        onClick={() => {
          setDirection('bottom');
          setOpen(true);
        }}
      >
        点击底部打开Drawer
      </Button>
      <AntdDrawer
        placement={direction}
        open={open}
        onClose={() => {
          setOpen(false);
        }}
      >
        <div>Drawer</div>
      </AntdDrawer>
    </div>
  );
};
const MenuDemo = () => {
  const items = [
    {
      key: '1',
      label: '1',
      icon: 'menu_knowledge',
      children: [
        {
          key: '1-1',
          label: '1-1',
        },
      ],
    },
    {
      key: '2',
      label: '2',
      icon: 'menu_knowledge',
    },
  ];
  const [selectedKeys, setSelectedKeys] = useState(['1']);
  return (
    <div>
      <div>Menu</div>
      <CustomMenu
        items={items}
        mode="inline"
        selectedKeys={selectedKeys}
        onClick={(e) => {
          setSelectedKeys([e.key]);
        }}
      />
    </div>
  );
};

const ButtonDemo = () => {
  return (
    <div className="flex flex-col gap-2">
      <div>Button</div>
      <div className="flex flex-col gap-2">
        <span>默认按钮</span>
        <Button>默认按钮</Button>
      </div>
      <div className="flex flex-col gap-2">
        <span>主要按钮</span>
        <Button type="primary">主要按钮</Button>
      </div>
      <div className="flex flex-col gap-2">
        <span>次要按钮</span>
        <Button type="secondary">次要按钮</Button>
      </div>
      <div className="flex flex-col gap-2">
        <span>虚线按钮</span>
        <Button type="dashed">虚线按钮</Button>
      </div>
      <div className="flex flex-col gap-2">
        <span>文本按钮</span>
        <Button type="text">文本按钮</Button>
      </div>
      <div className="flex flex-col gap-2">
        <span>链接按钮</span>
        <Button type="link">链接按钮</Button>
      </div>
      <div className="flex flex-col gap-2">
        <span>带图标的按钮</span>
        <div className="flex items-center gap-2">
          <Button icon={<SearchOutlined />}>搜索</Button>
          <Button type="primary" icon={<SearchOutlined />}>
            搜索
          </Button>
          <Button icon={<SearchOutlined />} iconPosition="end">
            右侧图标
          </Button>
        </div>
      </div>
      <div className="flex flex-col gap-2">
        <span>危险按钮</span>
        <div className="flex items-center gap-2">
          <Button danger>危险按钮</Button>
          <Button type="primary" danger>
            主要危险按钮
          </Button>
          <Button type="dashed" danger>
            虚线危险按钮
          </Button>
        </div>
      </div>
      <div className="flex flex-col gap-2">
        <span>禁用状态</span>
        <div className="flex items-center gap-2">
          <Button disabled>禁用按钮</Button>
          <Button type="primary" disabled>
            禁用主要按钮
          </Button>
          <Button danger disabled>
            禁用危险按钮
          </Button>
          <Button type="primary" danger disabled>
            禁用主要危险按钮
          </Button>
        </div>
      </div>
      <div className="flex flex-col gap-2">
        <span>加载状态</span>
        <Button loading>加载中</Button>
      </div>
    </div>
  );
};

const ComponentsDemo = () => {
  return (
    <div className="grid grid-cols-5 gap-2 p-4">
      <MenuDemo />
      <InputDemo />
      <AlertDemo />
      <SegmentedDemo />
      <DropdownDemo />
      <ButtonDemo />
      <EmptyDemo />
      <DrawerDemo />
      <TagsDemo />
      <CopyLabelDemo />
      <LabelDemo />
      <CustomFormLabelDemo />
      <RadioDemo />
      <SliderDemo />
      <InputNumberDemo />
      <UploadDemoTest />
      <BadgeDemoTest />
    </div>
  );
};

export default ComponentsDemo;
